import { useEffect, useState } from "react";
import { GetOrderDetails } from "../../api/order";
import { Button, Table, Image, Tag,Spin } from "antd";
import { useLocation } from "react-router-dom";
import React from 'react';

const Detail = () => {

    // 供应商订单详情
    const [SupplierOrders, setSupplierOrders] = useState([]);
    const location = useLocation();
    const [loading, setLoading] = React.useState(false);

    useEffect(() => {
        const bindSupplierOrders = async () => {
            setLoading(true);
            const res = await GetOrderDetails(
                {
                    id: location.pathname.slice(14),
                    page: 1,
                    limit: 10,
                    begin: "1750-05-22",
                    end: "2024-03-05"
                }
            );
            if (res.result === 0) {
                setSupplierOrders(res.data);
                setLoading(false)
            }
        }
        bindSupplierOrders();
    }, [])

    const SupplierOrder = [
        {
            title: "序号",
            render: (text, record, index) => `${index + 1}`
        },
        {
            title: '详情号',
            dataIndex: 'id',
            ellipsis: true,
        },
        {
            title: '图片',
            dataIndex: 'photo',
            render: (text) => (
                <Image
                    width={50}
                    src={text}
                />
            ),
        },
        {
            title: '商品名称',
            dataIndex: 'goodsName',
            ellipsis: true,
            width: 100
        },
        {
            title: '供应商',
            dataIndex: 'supplier',
            ellipsis: true,
            width: 100,
            render: (_, record) => (
                <>
                    <Tag color={record.supplier == null ? "error" : "blue"} > {record.supplier === null ? '自营' : record.supplier}</Tag>
                </>
            ),
        },
        {
            title: '单价',
            dataIndex: 'price',
            render: (val,) => (
                <>
                    <Tag color="error">￥{val}</Tag>
                </>
            )
        },
        {
            title: '数量',
            dataIndex: 'number',
            // width: '200px'
        },
        {
            title: '小计',
            dataIndex: 'money',
            render: (val, i) => (
                <>
                    <Tag color="error">{val}</Tag>
                </>
            )
        },
        {
            title: '发货',
            dataIndex: 'isSend',
            ellipsis: true,
            width: 100,
            render: (_, record) => (
                <>
                    <Tag color={record.isSend == 0 ? "warning" : "success"} > {record.isSend == 0 ? '否' : '是'}</Tag>
                </>
            ),
        },
        {
            title: '收货',
            dataIndex: 'isReceive',
            render: (_, record) => (
                <>
                    <Tag color={record.isReceive == 0 ? "warning" : "success"} > {record.isReceive == 0 ? '否' : '是'}</Tag>
                </>
            ),
        },
        {
            title: '发货时间',
            dataIndex: 'sendTime',
            ellipsis: true,
            render: (_, record) => (
                <>
                    <Tag>{record.sendTime == "" ? '-' : record.sendTime}</Tag>
                </>
            ),
        },
        {
            title: '收货时间',
            dataIndex: 'receiveTime',
            ellipsis: true,
            render: (_, record) => (
                <>
                    <Tag>{record.sendTime == "" ? '-' : record.sendTime}</Tag>
                </>
            ),
        },
        {
            title: '状态',
            dataIndex: 'isComplete',
            render: (_, record) => (
                <>
                    <Tag color={record.isComplete == 0 ? "warning" : "success"}>{record.isComplete == 0 ? '未发货' : '已发货'}</Tag>
                </>
            ),
        },
        {
            title: '操作',
            dataIndex: '',
            // width: '250px',
            render: () => (
                <span>
                    -
                </span>
            )
        },
    ];
    return (
        <div className="default-exam-container">
              <Spin spinning={loading} delay={500}>
            <div className="default-container">
                <div className="default-content">
                    <div className="default-table">
                        <Table
                            columns={SupplierOrder}
                            dataSource={SupplierOrders}
                            bordered
                            scroll={{
                                x: 1300,
                              }}
                        />
                    </div>
                </div>
            </div>
            </Spin>
        </div>
    )
}

export default Detail